import 'package:flutter/material.dart';
import 'package:flutter_swiper_plus/flutter_swiper_plus.dart';
import 'package:gw_github_flutter/common/route_name.dart';
import 'package:gw_github_flutter/route/swiper/buildin_transformers.dart';

class SwiperRoute extends StatefulWidget {
  SwiperRoute({Key? key}) : super(key: key);

  @override
  State<SwiperRoute> createState() => _SwiperRouteState();
}

class _SwiperRouteState extends State<SwiperRoute> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text(RouteName.swiperRoute),
      ),
      body: CustomScrollView(
        slivers: [
          _oneSwiper(),
          _twoSwiper(),
          _threeSwiper(),
          _fourSwiper(),
          _fiveSwiper(),
          _sixSwiper(),
          _sevenSwiper(),
          _eightSwiper(),
          _nineSwiper(),
          _tenSwiper(),
          _elevenSwiper(),
          _twelveSwiper(),
          _thirteenSwiper(),
          _fourteenSwiper(),
          _fiveteenSwiper(),
          _sixteenSwiper(),
          _seventeenSwiper(),
          const SliverToBoxAdapter(
            child: SizedBox(
              height: 10,
            ),
          )
        ],
      ),
    );
  }

  Widget _oneSwiper() {
    return SliverToBoxAdapter(
      child: Container(
        color: Colors.red,
        height: 100,
        child: Swiper(
          itemBuilder: (BuildContext context, int index) {
            return Column(
              children: [
                Text(
                  "$index",
                  textAlign: TextAlign.center,
                ),
                const Text("one")
              ],
            );
          },
          indicatorLayout: PageIndicatorLayout.COLOR,
          autoplay: true,
          itemCount: 5,
          pagination: const SwiperPagination(),
          control: new SwiperControl(),
        ),
      ),
    );
  }

  Widget _twoSwiper() {
    return SliverToBoxAdapter(
      child: Container(
        color: Colors.yellow,
        height: 100,
        child: Swiper(
          itemBuilder: (BuildContext context, int index) {
            return Column(
              children: [
                Text(
                  "$index",
                  textAlign: TextAlign.center,
                ),
                const Text("two")
              ],
            );
          },
          indicatorLayout: PageIndicatorLayout.COLOR,
          autoplay: true,
          itemCount: 5,
          pagination: const SwiperPagination(
              builder: FractionPaginationBuilder(
                  color: Colors.lightBlue,
                  fontSize: 15,
                  activeColor: Colors.blue,
                  activeFontSize: 13),
              alignment: Alignment.bottomCenter),
          // control: new SwiperControl(),
        ),
      ),
    );
  }

  Widget _threeSwiper() {
    return SliverToBoxAdapter(
      child: Container(
        color: Colors.green,
        height: 100,
        child: Swiper(
          itemBuilder: (BuildContext context, int index) {
            return Column(
              children: [
                Text(
                  "$index",
                  textAlign: TextAlign.center,
                ),
                const Text("three")
              ],
            );
          },
          autoplay: true,
          itemCount: 5,
          pagination: SwiperPagination(
              margin: const EdgeInsets.all(0.0),
              builder: SwiperCustomPagination(
                  builder: (BuildContext context, SwiperPluginConfig config) {
                return ConstrainedBox(
                  constraints: const BoxConstraints.expand(height: 50.0),
                  child: Container(
                      decoration: const BoxDecoration(
                          //渐变 从下至上颜色渐变（封面下播放、点赞、时长那栏文字）
                          gradient: LinearGradient(
                              begin: Alignment.bottomCenter,
                              end: Alignment.topCenter,
                              colors: [
                            Colors.black54,
                            Colors.transparent
                          ]) // 从下面是黑到上面透明
                          ),
                      // color: Colors.white,
                      child: Text(
                        "${config.activeIndex + 1}/${config.itemCount}",
                        style: const TextStyle(
                            fontSize: 20.0, color: Colors.white60),
                      )),
                );
              })),
          control: const SwiperControl(),
        ),
      ),
    );
  }

  Widget _fourSwiper() {
    return SliverToBoxAdapter(
      child: Container(
        color: Colors.blue,
        height: 100,
        child: Stack(
          children: <Widget>[
            ConstrainedBox(
              constraints: const BoxConstraints.expand(),
              child: Image.asset(
                "imgs/fengjing.png",
                fit: BoxFit.fill,
              ),
            ),
            Swiper.children(
              autoplay: false,
              pagination: const SwiperPagination(
                  alignment: Alignment.bottomCenter,
                  margin: EdgeInsets.fromLTRB(0.0, 0.0, 0.0, 5.0),
                  builder: DotSwiperPaginationBuilder(
                      color: Colors.white,
                      activeColor: Colors.lightGreenAccent,
                      size: 10.0,
                      activeSize: 20.0)),
              children: <Widget>[
                Image.asset(
                  "imgs/fengjing.png",
                  fit: BoxFit.contain,
                ),
                Image.asset(
                  "imgs/avatar-default.png",
                  fit: BoxFit.contain,
                ),
                Image.asset("imgs/fengjing.png", fit: BoxFit.contain)
              ],
            )
          ],
        ),
      ),
    );
  }

  Widget _fiveSwiper() {
    return SliverToBoxAdapter(
      child: Container(
        color: Colors.blue,
        height: 100,
        child: Swiper(
          scale: 0.8,
          fade: 0.3,
          itemBuilder: (c, i) {
            return Container(
              color: Colors.lightGreen,
              child: Text("five $i"),
            );
          },
          itemCount: 10,
          pagination: const SwiperPagination(),
        ),
      ),
    );
  }

  Widget _sixSwiper() {
    return SliverToBoxAdapter(
      child: Container(
        color: Colors.blue,
        height: 100,
        child: Swiper(
            outer: true,
            scale: 0.8,
            fade: 0.8,
            itemBuilder: (c, i) {
              return Container(
                color: Colors.grey,
                child: Text("six $i"),
              );
            },
            pagination: SwiperPagination(),
            itemCount: 10),
      ),
    );
  }

  Widget _sevenSwiper() {
    return SliverToBoxAdapter(
      child: Container(
          color: Colors.blue,
          height: 100,
          child: Swiper(
            itemCount: 10,
            itemBuilder: (BuildContext context, int index) {
              return Image.network(
                  "https://ss3.baidu.com/9fo3dSag_xI4khGko9WTAnF6hhy/image/h%3D300/sign=87d6daed02f41bd5c553eef461d881a0/f9198618367adab4b025268587d4b31c8601e47b.jpg",
                  semanticLabel: "seven $index",);
            },
          )),
    );
  }

  Widget _eightSwiper() {
    return SliverToBoxAdapter(
      child: Container(
        color: Colors.blue,
        height: 100,
        child: Swiper(
            outer: true,
            scale: 0.8,
            fade: 0.8,
            itemBuilder: (c, i) {
              return Card(
                elevation: 2.0,
                child: Stack(
                  alignment: AlignmentDirectional.center,
                  children: <Widget>[
                    Image.network(
                        "https://ss3.baidu.com/9fo3dSag_xI4khGko9WTAnF6hhy/image/h%3D300/sign=87d6daed02f41bd5c553eef461d881a0/f9198618367adab4b025268587d4b31c8601e47b.jpg"),
                    Container(
                      // margin: const EdgeInsets.all(140.0),
                      // padding: const EdgeInsets.only(bottom:10.0),
                      child: Text("eight $i"),
                    ),
                  ],
                ),
              );
            },
            pagination: new SwiperPagination(alignment: Alignment.topCenter),
            itemCount: 10),
      ),
    );
  }

  Widget _nineSwiper() {
    return SliverToBoxAdapter(
      child: Container(
        color: Colors.blue,
        height: 100,
        child: Swiper(
            outer: true,
            fade: 0.8,
            viewportFraction: 0.5,
            scale: 0.8,
            itemBuilder: (c, i) {
              return Container(
                color: Colors.grey,
                child: Text("nine $i"),
              );
            },
            pagination: new SwiperPagination(alignment: Alignment.topCenter),
            itemCount: 10),
      ),
    );
  }

  Widget _tenSwiper() {
    return SliverToBoxAdapter(
      child: Container(
        padding: const EdgeInsets.all(10),
        color: Colors.blue,
        height: 200,
        child: Swiper(
          transformer: AccordionTransformer(),
          // layout: layout,
          itemCount: 3,
          itemBuilder: (context, index) => buildItem(index, "ten"),
        ),
      ),
    );
  }

  Widget _elevenSwiper() {
    return SliverToBoxAdapter(
      child: Container(
        padding: const EdgeInsets.all(10),
        color: Colors.blue,
        height: 200,
        child: Swiper(
          transformer: ThreeDTransformer(),
          // layout: layout,
          itemCount: 3,
          itemBuilder: (context, index) => buildItem(index, "eleven"),
        ),
      ),
    );
  }

  Widget _twelveSwiper() {
    return SliverToBoxAdapter(
      child: Container(
        padding: const EdgeInsets.all(10),
        color: Colors.blue,
        height: 200,
        child: Swiper(
          transformer: ZoomInPageTransformer(),
          // layout: layout,
          itemCount: 3,
          itemBuilder: (context, index) => buildItem(index, "twelve"),
        ),
      ),
    );
  }

  Widget _thirteenSwiper() {
    return SliverToBoxAdapter(
      child: Container(
        padding: const EdgeInsets.all(10),
        color: Colors.blue,
        height: 200,
        child: Swiper(
          transformer: ZoomOutPageTransformer(),
          // layout: layout,
          itemCount: 3,
          itemBuilder: (context, index) => buildItem(index, "thirteen"),
        ),
      ),
    );
  }

  Widget _fourteenSwiper() {
    return SliverToBoxAdapter(
      child: Container(
        padding: const EdgeInsets.all(10),
        color: Colors.blue,
        height: 200,
        child: Swiper(
          // scale: 0.8,
          transformer: DeepthPageTransformer(),
          loop: false,
          // layout: layout,
          itemCount: 3,
          itemBuilder: (context, index) => buildItem(index, "fourteen"),
        ),
      ),
    );
  }

  Widget _fiveteenSwiper() {
    return SliverToBoxAdapter(
      child: Container(
        padding: const EdgeInsets.all(10),
        color: Colors.blue,
        height: 200,
        child: Swiper(
          transformer: ScaleAndFadeTransformer(),
          // layout: layout,
          itemCount: 3,
          itemBuilder: (context, index) => buildItem(index, "fiveteen"),
        ),
      ),
    );
  }

  Widget _sixteenSwiper() {
    return SliverToBoxAdapter(
      child: Container(
        padding: const EdgeInsets.all(10),
        color: Colors.blue,
        height: 200,
        child: Swiper(
          // scale: 0.8,
          itemWidth: 300,
          layout: SwiperLayout.STACK,
          itemCount: 5,
          itemBuilder: (context, index) => buildItem(index, "sixteen"),
        ),
      ),
    );
  }

  Widget _seventeenSwiper() {
    return SliverToBoxAdapter(
      child: Container(
        padding: const EdgeInsets.all(10),
        color: Colors.blue,
        height: 200,
        child: Swiper(
          // scale: 0.8,
          itemWidth: 400,
          layout: SwiperLayout.TINDER,
          itemCount: 5,
          itemBuilder: (context, index) => buildItem(index, "seventeen"),
        ),
      ),
    );
  }

  Widget buildItem(int index, String text) {
    return Container(
        // color: Colors.pink,
        decoration: BoxDecoration(
          color: Colors.pink,
          border: Border.all(color: Colors.black45),
          borderRadius: BorderRadius.circular(10)
        ),
        child: Center(child: Text(text + " $index")),
    );
  }
}
